<template>
	<view class="menu-wrap">
		<u-tabbar 
			:value="current" 
			:placeholder="true"  
			@change="onChange" 
			fixed 
			zIndex="99" 
			:border="false"
			:safeAreaInsetBottom="true"
		>
			<u-tabbar-item 
				v-for="(item, index) in list" 
				:key="index" 
				:text="item.text "
				:badge="index == 1 && noRead != '' ? noRead : ''" 
			>
				<image slot="inactive-icon" :src="item.iconPath" mode="aspectFit" class="menu-img" />
				<image slot="active-icon" :src="item.selectedIconPath" mode="aspectFit" class="menu-img" />
				{{ item.text }}
			</u-tabbar-item>
		</u-tabbar>
	</view>
</template>

<script>
import Common from '@/utils/common.js'
import Message from '@/utils/messageNum.js'
const app = getApp();
export default {
	data() {
		return {
			color: '#9EA9BC',
			selectedColor: '#2574F0',
			list: [
				{
					pagePath: '/pages/index/index',
					iconPath: '/static/images/menu/nav_icon_guangchang_nor@2x.png',
					selectedIconPath: '/static/images/menu/nav_icon_guangchang_act@2x.png',
					text: '招聘广场'
				},
				// {
				// 	pagePath: '/pages/workSeeker/workSeeker',
				// 	iconPath: '/static/images/menu/nav_icon_qiuzhizhe_nor@2x.png',
				// 	selectedIconPath: '/static/images/menu/nav_icon_qiuzhizhe_act@2x.png',
				// 	text: '简历'
				// },
				{
					pagePath: '/pages/message/messageList',
					iconPath: '/static/images/menu/nav_icon_message_nor@2x.png',
					selectedIconPath: '/static/images/menu/nav_icon_message_act@2x.png',
					text: '消息'
				},
				{
					pagePath: '/pages/my/my',
					iconPath: '/static/images/menu/nav_icon_me_nor@2x.png',
					selectedIconPath: '/static/images/menu/nav_icon_me_act@2x.png',
					text: '我的'
				}
			],
			noRead: ''
		}
	},
	props: {
		current: { type: [Number, String], default: 0 },
		noReadNum: { type: [Number, String], default: '' },
		backgroundColor: { type: String, default: '#fbfbfb' }
	},
	options: { //是否能修改vant组件样式
		styleIsolation: 'shared',
	},
	watch:{
		noReadNum(val){
			if(val){
				this.noRead = val
				this.$forceUpdate()
			}
		}
	},
	created(){
		if (uni.getStorageSync('token')){
			Message.unreadNum().then(resolve => {
				this.noRead = app.globalData.noReadNum = resolve
				this.$forceUpdate()
			})
		}
	},
	/**
	 * 组件的方法列表
	 */
	methods: {
		async onChange(event) {
			// let current = event.currentTarget.dataset.index;
			let current = event
			if (uni.getStorageSync('token') == '' && ( current == 1)) {
				//求职者和我的消息必须登录
				// #ifdef H5
					uni.navigateTo({
						url: '/pages/login/login'
					})
				// #endif
				// #ifdef MP-WEIXIN
					uni.navigateTo({
						url: '/pages/login/wxLogin'
					})
				// #endif
			} else {
				// #ifdef H5
					this.setData({current})
					uni.redirectTo({
						url: this.list[current].pagePath
					})
				// #endif
				// #ifdef MP-WEIXIN
					uni.switchTab({
						url: this.list[current].pagePath
					})
				// #endif
			}
			this.$forceUpdate()
		}
	},
}
</script>
<style lang="scss">
::v-deep{
	.u-tabbar__content{
		height:120rpx !important;
		border-radius: 24px 24px 0px 0px !important;
		background-color: #fff !important;
		box-shadow: 0 -3px 5px #f2f2f2 !important;
		display: flex !important;
		justify-content: center !important; 
	}
	@media screen and (min-height:720px){
	   .u-tabbar__content{
	      height:140rpx !important;
	   }
		.u-safe-area-inset-bottom{
			padding-bottom:26rpx !important;
		}
	}
}
.menu-wrap{
   position: fixed;
	z-index:80;
	bottom:0;
	display: flex;
	width:100%;
}
.tabs{
   flex:1;
   display: flex;
   flex-direction: column;
   align-items: center;
}
.tabs-text{
   font-size:24rpx;
   line-height: 26rpx;
}
.van-tabbar-item__icon {
   margin-bottom:2px !important;
}
.menu-img {
	width: 52rpx;
	height: 52rpx;
	display: block;
	margin-top: 2rpx;
}
</style>
